<template>
    <div class="self_driver">
        <Header/>
        <div id="content" class="clear_float">
            <div class="nav-city-box">
                <p>
                </p>
            </div>
            <div class="choosecartype">
                <form>
                    <div class="term clearfix">
                        <ul class="first">
                            <li>
                                <label class="key">
                                    取车门店：
                                </label>
                                <div class="citystore" id="pickupStore">
                                    <input name="getCarCity" id="getCarCity" class="input-city  input-bdno"
                                           autocomplete="off" value="上海" type="text" maxlength="30">
                                    <input autocomplete="off" class="mendian input-txt fl" id="getStore"
                                           name="PickUpStoreName" type="text" v-model="store">
                                </div>
                            </li>
                            <li>
                                <label class="key">
                                    还车门店：
                                </label>
                                <div class="citystore" id="dropoffStore">
                                    <input autocomplete="off" class="citysel input-txt" id="ReturnCity" maxlength="10"
                                           name="ReturnCity" type="text" value="上海">
                                    <input autocomplete="off" class="mendian input-txt fl" id="retStore"
                                           name="ReturnStoreName" type="text" v-model="store">
                                </div>

                            </li>
                        </ul>
                        <ul class="second">
                            <li>
                                <label class="key tit" for="J_date_1">
                                    取车时间：
                                </label>
                                <div class="fl" style="display: inline; margin-right: 4px;">
                                    <div style="position: relative; display: inline-block; width: 144px; height: 26px;">
                                        <el-date-picker
                                                v-model="value1"
                                                type="date"
                                                placeholder="取车日期"
                                                style="width: 150px"
                                                value-format="yyyy-MM-dd">
                                        </el-date-picker>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <label class="key tit" for="J_date_2">
                                    还车时间：
                                </label>
                                <div class="fl" style="display: inline; margin-right: 4px;">
                                    <div style="position: relative; display: inline-block; width: 144px; height: 26px;">
                                        <el-date-picker
                                                v-model="value2"
                                                type="date"
                                                placeholder="还车日期"
                                                style="width: 150px"
                                                value-format="yyyy-MM-dd"
                                        >
                                        </el-date-picker>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <!--<button class="reviseBtn" @click="search()">查询</button>-->
                        <span class="reviseBtn" @click="get_car">查询</span>
                        <!--<input class="reviseBtn" type="submit" v-model="filter" id="btnSubmit">-->
                    </div>
                </form>
                <div class="prompt-box clearfix">
                    <div class="company-prompt" id="companyPrompt"></div>
                    <div class="lease-prompt">* 当前选定租期：<span>{{date}}</span>天</div>
                </div>
                <div class="car-box-body">
                </div>
                <div class="choose-typebox">
                    <div class="choose-model cartypelist">
                        <div class="model_head">
                            <span style="font-size: 30px;background-color: darkorange;">车型</span>
                        </div>
                        <div class="model-classify">
                            <p @click="get_model('全部')"
                               :class="{active: model === '全部'}">全部</p>
                        </div>
                        <div class="model-classify">
                            <p @click="get_model('SUV')"
                               :class="{active: model === 'SUV'}">SUV</p>
                        </div>
                        <div class="model-classify">
                            <p @click="get_model('跑车')"
                               :class="{active: model === '跑车'}">跑车</p>
                        </div>
                        <div class="model-classify">
                            <p @click="get_model('MPV')"
                               :class="{active: model === 'MPV'}">MPV</p>
                        </div>
                        <div class="model-classify">
                            <p @click="get_model('皮卡')"
                               :class="{active: model === '皮卡'}">皮卡</p>
                        </div>
                    </div>
                    <div class="choose-branch">
                        <div class="choose-brand choose-ck">
                        <span class="titlee">
                            品牌：
                        </span>
                            <div class="brandlist">
                                <span data-value="" class="on" data-ba-label="品牌_全部" @click="get_brand('全部')"
                                      :class="{active: brand === '全部'}">全部</span>
                                <span class="carbrand" @click="get_brand('福特猛禽')"
                                      :class="{active: brand === '福特猛禽'}">福特猛禽</span>
                                <span class="carbrand" @click="get_brand('GMC')"
                                      :class="{active: brand === 'GMC'}">GMC</span>
                                <span class="carbrand" @click="get_brand('GTR')"
                                      :class="{active: brand === 'GTR'}">GTR</span>
                                <span class="carbrand" @click="get_brand('奔驰大G')"
                                      :class="{active: brand === '奔驰大G'}">奔驰大G</span>
                                <span class="carbrand" @click="get_brand('道奇公羊')"
                                      :class="{active: brand === '道奇公羊'}">道奇公羊</span>
                                <span class="carbrand" @click="get_brand('保时捷911')"
                                      :class="{active: brand === '保时捷911'}">保时捷911</span>
                                <span class="carbrand" @click="get_brand('库里南')"
                                      :class="{active: brand === '库里南'}">库里南</span>
                                <span class="carbrand" @click="get_brand('林肯领航员')"
                                      :class="{active: brand === '林肯领航员'}">林肯领航员</span>
                            </div>
                        </div>
                        <hr>
                        <div class="choose-price choose-ck">
                        <span class="titlee">
                            价格：
                        </span>
                            <div class="pricelist">
                                <span class="on" @click="price_choice('全部')"
                                      :class="{active: price === '全部'}">全部</span>
                                <span class="carprice" @click="price_choice('1000元以下')"
                                      :class="{active: price === '1000元以下'}">1000元以下</span>
                                <span class="carprice" @click="price_choice('1000-2000')"
                                      :class="{active: price === '1000-2000'}">1000-2000</span>
                                <span class="carprice" @click="price_choice('2000元以上')"
                                      :class="{active: price === '2000元以上'}">2000元以上</span>
                                <!--active用于点击时候的样式，选中哪个，样式就是哪个-->
                            </div>
                        </div>
                    </div>
                </div>
                <li class="sort clearfix">
                    <ul class="field-orderby" sortby="null">
                        <li class="sort-default">
                            <span class="order-def"
                                  :class="(filter.ordering=='price' || filter.ordering=='-price')?'this':''"
                                  @click="filter.ordering='-price'">
                                默认排序
                            </span>
                        </li>
                        <br>
                        <li class="sort-price">
                            <span class="order-def"
                                  :class="(filter.ordering=='price' || filter.ordering=='-price')?'this':''"
                                  @click="filter.ordering=(filter.ordering=='-price'?'price':'-price')">
                                按租金
                            </span>
                        </li>
                        <li class="sort-emission">
                            <span class="order-def" :class="(filter.ordering=='cc' || filter.ordering=='-cc')?'this':''"
                                  @click="filter.ordering=(filter.ordering=='-cc'?'cc':'-cc')">
                                按排量
                            </span>
                        </li>
                        <li class="field-tip">
                            *共有
                            <span id="carTypeCount">{{ car_total }}</span>
                            种车型可以租用
                        </li>
                    </ul>
                    <div class="field-level-wrap">
                    </div>
                </li>
                <div class="car-list">
                    <div class="car-item" v-for="car in car_list" :key="car.brand">
                        <div class="car-image" style="width: 800px">
                            <img :src="car.img" alt="">
                                <span><h3>{{ car.brand }}</h3></span>
                            <!--<el-button type="text" @click="open"><h3>{{ car.brand }}</h3></el-button>-->
                            <h4>{{car.box_name}}档| {{car.seat}}座| {{car.cc}}L| {{car.consumption}}L/百公里| {{car.get_air}}</h4>
                        </div>
                        <br>
                        <div class="car-info">
                            <p class="teather-info">
                                <!--写车辆配置信息，包括车型-->
                                <!--{{car.box_name}}|{{car.seat}}座-->
                                <!--查看详情，有模态框-->
                                <!--<span v-if="car.sections>car.pub_sections">共{{car.sections}}课时/已更新{{car.pub_sections}}课时</span>-->
                                <!--<span v-else>共{{car.sections}}课时/更新完成</span>-->
                            </p>
                            <div class="pay-box">
                                <span class="discount-price">日均/{{car.price}}元</span>
                                <span class="buy-now" @click="buy_car(car)">立即预定</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="course_pagination block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="filter.page"
                            :page-sizes="[2, 3, 5, 10]"
                            :page-size="filter.page_size"
                            layout="sizes, prev, pager, next"
                            :total="car_total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <Footer/>
    </div>

</template>

<script>
    import Header from "../components/Header";
    import Footer from "../components/Footer";

    export default {
        name: "Self_drive",
        data() {
            return {
                model_list: [],//车型列表
                car_list: [], //汽车列表
                car_total: 0, //当前车型的总数量
                val: '',
                model: "",
                brand: "",
                value1: '',
                value2: '',
                store: '',
                date: '',
                price: '',
                filter: {
                    car_model: 0, //当前用户选择的车型，刚进入页面默认为全部，值为0
                    car_brand: 0, //当前用户选择的车牌，刚进入页面默认为全部，值为0
                    page_size: 10, //单页数据量
                    ordering: "-id",
                    page: 1,
                    search: '',
                    max_price: 0,
                    min_price: 0,
                },
            }
        },
        created() {
            this.get_search_word();
            this.get_car();
        },
        components: {Footer, Header},
        watch: {
            // "$route": function () {
            //     this.get_search_word();
            //     this.get_car();
            // },
            // "filter.search": function () {
            //     this.get_car();
            // }
            "filter.ordering": function () {
                this.get_car();
            },
            "filter.page_size": function () {
                this.get_car();
            },
            "filter.page": function () {
                this.get_car();
            },
            "filter.car_model": function () {
                this.get_car();
            },
            "filter.car_brand": function () {
                this.get_car()
            },
            "filter.min_price": function () {
                this.get_car()
            },
            "filter.max_price": function () {
                this.get_car()
            }
        },
        methods: {
            // 预定汽车
            buy_car(car){
                let token = this.$cookies.get('token');
                if (!token) {
                    this.$message({
                        message: "请先登录",
                        type: 'warning',
                        duration: 1000,
                    });
                    return false
                }
                let date = this.date;
                // 已经登录
                console.log(`${car.id}`);
                this.$axios({
                    url: this.$settings.base_url + '/order/pay',
                    method: 'post',
                    data: {
                        subject: car.brand,
                        total_amount: car.price*date,
                        goods_pks: `${car.id}`,
                        rent_date: date
                    },
                    headers: {
                        authorization: `jwt ${token}`
                    },

                }).then(response => {
                    let pay_url = response.data;
                    window.open(pay_url, '_self');
                }).catch(error => {
                    console.log(error.response.data)
                })
            },
            handleSizeChange(val) {
                // 每页数据量发生变化时执行的方法
                this.filter.page = 1;
                this.filter.page_size = val;
            },
            handleCurrentChange(val) {
                // 页码发生变化时执行的方法
                this.filter.page = val;
            },
            get_search_word() {
                // console.log(this.$route)

                // this.filter.search = this.$route.query.store;
                if (!this.$route.query.store) {
                    this.store = "松江店"
                } else {
                    this.store = this.$route.query.store
                }
                if (!(this.$route.query.value1 && this.$route.query.value2)) {
                    this.value1 = "2019-12-27";
                    this.value2 = '2019-12-29';
                }
                else {
                    this.value1 = this.$route.query.value1;
                    this.value2 = this.$route.query.value2;
                }
                //value1，value2没传过来，date肯定也没有，所以需要自己算(应该放在查询点击事件里)
                this.date = this.$route.query.date;
            },
            get_model(val) {
                this.model = val;
                if (val === 'SUV') {
                    this.filter.car_model = 1;
                } else if (val === '跑车') {
                    this.filter.car_model = 2;
                } else if (val === 'MPV') {
                    this.filter.car_model = 3;
                } else if (val === '皮卡') {
                    this.filter.car_model = 4;
                } else {
                    this.filter.car_model = 0;
                }

            },
            get_brand(val) {
                this.brand = val;
                if (val === "福特猛禽") {
                    this.filter.car_brand = 3;
                } else if (val === "GMC") {
                    this.filter.car_brand = 1;
                } else if (val === "GTR") {
                    this.filter.car_brand = 2;
                } else if (val === "奔驰大G") {
                    this.filter.car_brand = 4;
                } else if (val === "道奇公羊") {
                    this.filter.car_brand = 5;
                } else if (val === "保时捷911") {
                    this.filter.car_brand = 6;
                } else if (val === "库里南") {
                    this.filter.car_brand = 7;
                } else if (val === "林肯领航员") {
                    this.filter.car_brand = 8;
                } else {
                    this.filter.car_brand = 0;
                }
            },
            price_choice(val) {
                this.price = val;
                if (val === "1000元以下") {
                    this.filter.max_price = 1000;
                    this.filter.min_price = 0;
                } else if (val === "1000-2000") {
                    this.filter.min_price = 1001;
                    this.filter.max_price = 2000;
                } else if (val === "2000元以上") {
                    this.filter.min_price = 2001;
                    this.filter.max_price = 0;
                } else {
                    this.filter.min_price = 0;
                    this.filter.max_price = 0;
                }

            },
            car_sort() {

            },
            get_car() {
                // 排序
                let filters = {
                    ordering: this.filter.ordering, //排序
                };
                // 判决是否依据车型进行展示
                // if(this.filter.car_model>0){
                //     filters.model = this.filter.car_model;

                // }
                // console.log(this.filter.ordering);
                // 按车型筛选
                filters.model = this.filter.car_model;
                if (filters.model === 0) {
                    delete filters.model
                }

                // 按车牌筛选

                filters.brand = this.filter.car_brand;
                if (filters.brand === 0) {
                    delete filters.brand
                }

                // 获取日期
                let aDate, oDate1, oDate2, iDays;
                aDate = this.value1.split("-");
                oDate1 = new Date(aDate[0], aDate[1], aDate[2]);
                aDate = this.value2.split("-");
                oDate2 = new Date(aDate[0], aDate[1], aDate[2]);
                if ((oDate2 - oDate1) < 0) {
                    this.$message({
                        message: '日期输入有误',
                        type: 'warning',
                        duration: 1000,
                    })
                } else {
                    iDays = parseInt(Math.abs(oDate2 - oDate1) / 1000 / 60 / 60 / 24);
                    this.date = iDays;
                }

                // 按价格筛选

                if (this.filter.max_price === 0 && this.filter.min_price !== 0) {
                    filters.min_price = this.filter.min_price;
                } else if (this.filter.min_price === 0 && this.filter.max_price !== 0) {
                    filters.max_price = this.filter.max_price;
                } else if (this.filter.max_price !== 0 && this.filter.min_price !== 0) {
                    filters.max_price = this.filter.max_price;
                    filters.min_price = this.filter.min_price;
                }


                // 按门店进行筛选
                if (this.store === "松江店") {
                    filters.store = 1;
                } else {
                    filters.store = 2;
                }
                // 设置单页数据量
                if (this.filter.page_size > 0) {
                    filters.page_size = this.filter.page_size;
                } else {
                    filters.page_size = 5;
                }

                // 设置当前页码
                if (this.filter.page > 1) {
                    filters.page = this.filter.page;
                } else {
                    filters.page = 1;
                }

                // 获取汽车列表信息
                this.$axios.get(`${this.$settings.base_url}/car/select`, {
                    params: filters
                }).then(response => {
                    this.car_list = response.data.results;
                    // let car_li = [];
                    // for(let i=0;i<this.car_lis.length;i++){
                    //     if(this.store === this.car_lis[i].get_store){
                    //         car_li.push(this.car_lis[i])
                    //     }
                    // }
                    // this.car_list = car_li;
                    console.log(this.car_list);
                    this.car_total = response.data.count;
                    // console.log(this.car_total);

                }).catch(() => {
                    this.$message({
                        message: "获取车辆信息有误，请联系客服工作人员"
                    })
                });
            },
            open() {
                this.$alert('这是一段内容', '标题名称', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                            message: `action: ${ action }`
                        });
                    }
                });
            },
        }
    }
</script>

<style scoped>
    #content {
        width: 1180px;
        margin: 0 auto;
        padding-bottom: 50px;
    }

    .clear_float {
        zoom: 1;
        display: block;
    }

    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
        margin: 0;
        padding: 0;
    }

    div {
        display: block;
    }

    body {
        font-family: Arial, "Microsoft YaHei", Helvetica, Verdana, SimHei, sans-serif;
        color: #666;
    }

    body, button, input, select, textarea {
        font: 12px/1.5 Arial, "Microsoft YaHei", Helvetica, Verdana, SimHei, sans-serif;
    }

    .clear_float:after {
        display: block;
        visibility: hidden;
        height: 0;
        clear: both;
        content: "";
    }

    .nav-city-box {
        padding-top: 10px;
    }

    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    #content .choosecartype {
        margin: 10px auto 0;
        width: 890px;
        float: left;
    }

    form {
        display: block;
        margin-top: 0em;
    }

    .clearfix {
        *height: 1%;
    }

    .term {
        padding: 12px 0 5px;
        background: #f5f5f5;
        border: 1px solid #ccc;
    }

    .clearfix {
        *zoom: 1;
    }

    .term ul.first {
        width: 420px;
    }

    .term ul {
        float: left;
        padding-left: 15px;
    }

    ul, ol {
        list-style: none;
    }

    .term span.reviseBtn:hover {
        /*background-position: 0 -37px;*/
        background-color: gold;
    }

    .term span.reviseBtn {
        font-size: 15px;
        margin: 10px 0 0 7px;
        background-position: 0 0;
    }

    .term span.reviseBtn, .term input.batch-search-button {
        position: relative;
        float: left;
        width: 90px;
        height: 36px;
        border: none;
        cursor: pointer;
    }

    .choose-typebox {
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }

    div {
        display: block;
    }

    .choose-model {
        height: 82px;
        border-bottom: 1px solid #ccc;
    }

    .choose-model div {
        float: left;
        width: 77px;
        height: 82px;
        text-align: center;
        border-width: 1px;
        border-style: solid;
        border-color: transparent;
        margin: -1px 0 0 -1px;
        margin-right: 6px;
        font-size: 12px;
        color: #666;
        cursor: pointer;
        text-decoration: none;
    }

    .model-classify {
        width: 77px;
        height: 82px;
    }

    .model-classify p {
        padding: 8px 0;
        font-size: 20px;
    }

    .model-classify p:hover {
        background-color: pink;
    }

    .choose-model .model_head {
        cursor: none;
        width: 40px;
    }

    .brandlist span {
        float: left;
        width: 77px;
        text-align: center;
        border-width: 1px;
        border-style: solid;
        border-color: transparent;
        margin: -1px 0 0 -1px;
        margin-right: 6px;
        font-size: 12px;
        color: #666;
        cursor: pointer;
        text-decoration: none;
    }

    .choose-branch {
        height: 100px;
        border-bottom: 1px solid #ccc;
    }

    .choose-branch .titlee {
        background-color: orangered;
    }

    .pricelist span {
        float: left;
        width: 77px;
        text-align: center;
        border-width: 1px;
        border-style: solid;
        border-color: transparent;
        margin: -1px 0 0 -1px;
        margin-right: 6px;
        font-size: 12px;
        color: #666;
        cursor: pointer;
        text-decoration: none;
    }

    .brandlist span:hover, .pricelist span:hover {
        background-color: pink;
    }

    .brandlist span.active {
        background-color: pink;
    }

    .field-orderby li {
        margin-right: 20px;
        height: 20px;
        float: left;
    }

    .sort-price:hover, .sort-emission:hover {
        background-color: pink;
        cursor: pointer;
    }

    .field-orderby .field-tip {
        float: right;
    }

    .field-orderby .sort-default {
        margin-bottom: 10px;
        background-color: orangered;
    }

    .sort {
        background-color: bisque;
    }

    .car .car-item:hover {
        box-shadow: 4px 6px 16px rgba(0, 0, 0, .5);
    }

    .car .car-item {
        width: 1100px;
        background: #fff;
        padding: 20px 30px 20px 20px;
        margin-bottom: 35px;
        border-radius: 2px;
        cursor: pointer;
        box-shadow: 2px 3px 16px rgba(0, 0, 0, .1);
        /* css3.0 过渡动画 hover 事件操作 */
        transition: all .2s ease;
    }

    .car .car-item::after {
        content: "";
        display: block;
        clear: both;
    }

    /* 顶级元素 父级元素  当前元素{} */
    .car .car-item .car-image {
        float: left;
        width: 300px;
        height: 210px;
        margin-right: 30px;
    }

    h3 {
        float: right;
        color: hotpink;
        margin-top: 50px;
    }

    .car-image h4 {
        float: right;
        color: lightpink;
        margin-top: 90px;
    }

    .car .car-item .car-image {
        width: 300px;
        max-height: 210px;
    }

    .car .car-item .car-info {
        float: left;
        width: 596px;
    }

    .car-item .car-info h3 a {
        font-size: 26px;
        color: #333;
        font-weight: normal;
        margin-bottom: 8px;
    }

    .car-item .car-info h3 span {
        font-size: 14px;
        color: #9b9b9b;
        float: right;
        margin-top: 14px;
    }

    .car-item .car-info h3 span img {
        width: 11px;
        height: auto;
        margin-right: 7px;
    }

    .car-item .car-info .teather-info {
        font-size: 14px;
        color: #9b9b9b;
        margin-bottom: 14px;
        padding-bottom: 14px;
        border-bottom: 1px solid #333;
        border-bottom-color: rgba(51, 51, 51, .05);
    }

    .car-item .car-info .teather-info span {
        float: right;
    }

    .car-item .section-list::after {
        content: "";
        display: block;
        clear: both;
    }

    .car-item .section-list li {
        float: left;
        width: 44%;
        font-size: 14px;
        color: #666;
        padding-left: 22px;
        /* background: url("路径") 是否平铺 x轴位置 y轴位置 */
        /*background: url("/src/assets/img/play-icon-gray.svg") no-repeat left 4px;*/
        /*background: url("/src/assets/img/play-icon-gray.svg") no-repeat left 4px;*/
        margin-bottom: 15px;
    }

    .car-item .section-list li .section-title {
        /* 以下3句，文本内容过多，会自动隐藏，并显示省略符号 */
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
        max-width: 200px;
    }

    .car-item .section-list li:hover {
        /*background-image: url("/src/assets/img/play-icon-yellow.svg");*/
        color: #ffc210;
    }

    .car-item .section-list li .free {
        width: 34px;
        height: 20px;
        color: #fd7b4d;
        vertical-align: super;
        margin-left: 10px;
        border: 1px solid #fd7b4d;
        border-radius: 2px;
        text-align: center;
        font-size: 13px;
        white-space: nowrap;
    }

    .car-item .section-list li:hover .free {
        color: #ffc210;
        border-color: #ffc210;
    }

    .car-item {
        position: relative;
    }

    .car-item .pay-box {
        position: absolute;
        bottom: 20px;
        width: 600px;
    }

    .car-item .pay-box::after {
        content: "";
        display: block;
        clear: both;
    }

    .car-item .pay-box .discount-type {
        padding: 6px 10px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        margin-right: 8px;
        background: #fa6240;
        border: 1px solid #fa6240;
        border-radius: 10px 0 10px 0;
        float: left;
    }

    .car-item .pay-box .discount-price {
        font-size: 24px;
        color: #fa6240;
        float: left;
    }

    .car-item .pay-box .original-price {
        text-decoration: line-through;
        font-size: 14px;
        color: #9b9b9b;
        margin-left: 10px;
        float: left;
        margin-top: 10px;
    }

    .car-item .pay-box .buy-now {
        width: 120px;
        height: 38px;
        background: transparent;
        color: #fa6240;
        font-size: 16px;
        border: 1px solid #fd7b4d;
        border-radius: 3px;
        transition: all .2s ease-in-out;
        float: right;
        text-align: center;
        line-height: 38px;
        position: absolute;
        right: 0;
        bottom: 5px;
    }

    .car-item .pay-box .buy-now:hover {
        color: #fff;
        background: #ffc210;
        border: 1px solid #ffc210;
    }

    .car .car_pagination {
        margin-bottom: 60px;
        text-align: center;
    }

    .model-classify p.active {
        background-color: pink;
    }

    .pricelist span.active {
        background-color: pink;
    }

    .buy-now {
        cursor: pointer;
    }
</style>